<script setup>
import { getStudentWorkData } from '@/api/studentWork.js'
import { preloadImage } from '@/utils/tool.js';
import VLoading from "@/components/VLoading.vue";

let loading = ref(false)
const hoveredIndex = ref(-1);
const delayedIndex = ref(-1);
const hoveredQRIndex = ref(-1);
const miniprogramResource = ref([]); // 使用空数组初始化
let timer = null;

const handleMouseEnter = ((index) => {
  hoveredIndex.value = index
  if (timer) clearTimeout(timer);
  timer = setTimeout(() => {
    delayedIndex.value = index;
  }, 400);
})

const handleMouseLeave = (() => {
  hoveredIndex.value = -1
  if (timer) clearTimeout(timer);
  delayedIndex.value = -1;
})

const handleQRcodeEnter = ((val) => {
  hoveredQRIndex.value = val
})

const handleQRcodeLeave = (() => {
  hoveredQRIndex.value = -1
})

const test = ((id) => {
  if (id === 3) {
    window.open('https://www.baidu.com', '_blank');
  }
})

onMounted(async () => {
  loading.value = true
  try {
    const res = await getStudentWorkData();
    if (res.status === 200) {
      miniprogramResource.value = res.data.data.map(item => item.attributes.studentwork);

      // 预加载图片
      miniprogramResource.value.forEach(element => {
        preloadImage(element.bgImg);
        preloadImage(element.logo);
        preloadImage(element.QRcode);
      });
    }
  }
  catch (err) {
    alert('网络请求出现错误，请联系管理员')
  }
  finally {
    loading.value = false
  }
})
</script>
<template>

  <body>
    <template v-if="loading">
      <VLoading :isLoading=loading></VLoading>
    </template>
    <template v-else>
      <div class="shell">
        <template v-for="item in miniprogramResource" :key="item.id">
          <div class="box" @mouseenter="handleMouseEnter(item.id)" @mouseleave="handleMouseLeave">
            <img class="bgImg" :src="item.bgImg">
            <div :class="hoveredIndex === item.id ? 'avatarEnter' : 'avatar'" :style="{
      backgroundImage: hoveredQRIndex === item.id ? 'url(' + item.QRcode + ')' : 'url(' + item.logo + ')'
    }" @mouseenter="handleQRcodeEnter(item.id)" @mouseleave="handleQRcodeLeave" @click="test(item.id)">
            </div>
            <div :class="delayedIndex === item.id ? 'title' : ''"
              :style="{ visibility: delayedIndex === item.id ? 'visible' : 'hidden' }">{{ item.title }}</div>
            <div :class="delayedIndex === item.id ? 'maker' : ''"
              :style="{ visibility: delayedIndex === item.id ? 'visible' : 'hidden' }">
              <text style="color: black;">制 作 人:
              </text>{{ item.fabricator }}
            </div>
            <div :class="delayedIndex === item.id ? 'introduce' : ''"
              :style="{ visibility: delayedIndex === item.id ? 'visible' : 'hidden' }">
              <span style="color: black; font-weight: bolder;">作品介绍:</span> {{ item.introduce }}
            </div>
          </div>
        </template>
      </div>
    </template>
  </body>
</template>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 80vh;
  margin-top: 15vh;
  overflow: hidden;
}

.shell {
  width: 95%;
  height: 80vh;
  display: flex;
}

.box {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 20px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);
  border-radius: 20px;
  border: 1px solid #fff;

  position: relative;
}

.bgImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
  transition: all 0.5s ease-in-out;
  position: absolute;
}

.box:hover {
  flex-basis: 30%;
}

/** 编写鼠标进入样式 */
.avatar,
.avatarEnter {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background-color: white;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  transition: all 0.5s ease-in-out;

  background-position: center;
  background-size: cover;
}

.avatarEnter {
  width: 150px;
  height: 150px;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.avatarEnter:hover {
  transition: all 0.5s ease-in-out;
  border-radius: 10px;
  background-color: lightblue;
}

.title {
  font-size: 1.3rem;
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -38%);
  font-weight: bolder;
}

.maker {
  font-size: 1rem;
  font-weight: bolder;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -45%);
  width: 100%;
  text-align: center;
  color: #65656a;
}

.introduce {
  position: absolute;
  width: 90%;
  top: 50%;
  left: 5%;
  right: 5%;
  text-align: justify;
  color: #65656a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 7;
  /* 指定显示的行数 */
}
</style>